<template>
  <div class="swiper-box">
    <Swiper ref="mySwiper"
            :modules="[Autoplay]"
            :autoplay="autoplayOptions"
            loop
            @slideChange="updateIndex"
            @swiper="onSwiper"
    >
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <div class="swiper-slide-home flex flex-col justify-center items-center px-4">
          <img :src="item" alt="">
        </div>
      </swiper-slide>
    </Swiper>
    <div class="kongjian" @click.stop>
      <div class="kongjian-1"
           @click.stop="goToSlide(index)"
           :class="swiperIndex==index?'Bg_FFFFFF':'Bg_FFFFFF05'"
           v-for="(_, index) in swiperList" :key="index"></div>
    </div>
  </div>


</template>
<script setup lang="ts">
import {Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/swiper-bundle.css';
import {Autoplay} from "swiper/modules";
import {onMounted, ref,reactive} from "vue";
const swiperInstance = ref<any>(null);//轮播图实例
const mySwiper = ref<any>(null);//轮播图实例
let swiperIndex = ref(0)
const autoplayOptions:any =reactive({
  delay: 3000,
  disableOnInteraction: false // 继续轮播
});
// 定义props
defineProps({
  swiperList: {
    type: Array,
    default: () => []
  }
});

// 保存 swiper 实例
const onSwiper = (swiper:any) => {
  mySwiper.value = swiper;
  swiperInstance.value = swiper;
};
//切换至那一张下标
const updateIndex = (e:any) => {
  swiperIndex.value = e.realIndex; // 更新当前幻灯片的索引
}
//控件
const goToSlide = (index:number) => {
  if (swiperInstance.value) {
    swiperInstance.value.slideTo(index); // 切换到指定幻灯片
  }
}

// 组件挂载完成后初始化swiper
onMounted(() => {
  if (mySwiper.value) {

    // mySwiper.value.swiper.slideTo(1); // 跳转到第二张幻灯片（索引 1）
  }
})
</script>
<style lang="scss" scoped>
.swiper-box{
  width: 100%;
  height: 100%;
  position: relative;
  .kongjian {
    position: absolute;
    bottom: 10px;
    right: 4%;
    display: flex;
    align-items: center;
    z-index: 100;
    padding: 10px;
    .kongjian-1 {
      height: 6px;
      width: 30px;
      border-radius: 100px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
}
.swiper {
  width: 100%;
  height: 100%;
  position: relative;



  .swiper-position {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 400px;
    z-index: 1000;

    .swiper-pagination-btm {
      margin-top: 120px;
      display: flex;
      justify-content: center;

      .swiper-pagination-btm-l {
        margin: 0 30px;
        width: 180px;
        height: 49px;
        background: #007DFC;
        border: 1px solid #007DFC;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
      }

      .swiper-pagination-btm-r {
        margin: 0 30px;
        width: 180px;
        height: 49px;
        background: #fff;
        border: 1px solid #007DFC;
        color: #007DFC;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
      }
    }

    .MVOV {
      display: flex;
      justify-content: space-around;

      .MVOV-tiem {
        .MVOV-tiem_t {
          position: relative;
          display: flex;

          .MVOV-tiem_t-p {
            position: absolute;
            bottom: 6px;
            left: 0;
            width: 72px;
            height: 3px;
            background: #F9C50D;
          }
        }

      }
    }
  }

  .swiper-slide-home {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    img {
      width: 100%;
      height: 100%;
    }

    .swiper-slide-home-title {
      font-size: 36px;
      font-weight: lighter;
    }

    .swiper-slide-home-desc {
      font-size: 20px;
      font-weight: lighter;
    }
  }
}
</style>

